<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .grid-container {
      /* 网格布局 */
      display: grid;
       /* 将容器平均分成12列 */
      grid-template-columns: repeat(12, 1fr);
      height: 100px;
      margin: 10px 0;
    }
    .grid-item {
      padding: 10px;
      font-size: 20px;
      color: red;
    }
    .grid-item:nth-child(2n+1) {
      background-color: skyblue;
    }
    .grid-item:nth-child(2n) {
      background-color: tomato;
    }
    .col-1 {
        /* 宽为父容器1份宽 */
      grid-area: auto/auto/auto/span 1;
    }
    .col-2 {
         /* 宽为父容器2份宽 */
      grid-area: auto/auto/auto/span 2;
    }
    .col-3 {
        /* 宽为父容器3份宽 */
      grid-area: auto/auto/auto/span 3;
    }
    .col-4 {
          /* 宽为父容器4份宽 */
      grid-area: auto/auto/auto/span 4;
    }
    .col-5 {
         /* 宽为父容器5份宽 */
      grid-area: auto/auto/auto/span 5;
    }
    .col-6 {
      grid-area: auto/auto/auto/span 6;
    }
    .col-7 {
      grid-area: auto/auto/auto/span 7;
    }
    .col-8 {
      grid-area: auto/auto/auto/span 8;
    }
    .col-9 {
      grid-area: auto/auto/auto/span 9;
    }
    .col-10 {
      grid-area: auto/auto/auto/span 10;
    }
    .col-11 {
      grid-area: auto/auto/auto/span 11;
    }
    .col-12 {
      grid-area: auto/auto/auto/span 12;
    }
  </style>
  <body>
    <div class="grid-container">
      <div class="grid-item col-3">1</div>
      <div class="grid-item col-3">2</div>
      <div class="grid-item col-3">3</div>
      <div class="grid-item col-3">4</div>
    </div>
    <div class="grid-container">
      <div class="grid-item col-4">1</div>
      <div class="grid-item col-4">2</div>
      <div class="grid-item col-4">3</div>
    </div>
    <div class="grid-container">
      <div class="grid-item col-6">1</div>
      <div class="grid-item col-6">2</div>
    </div>
    <div class="grid-container">
      <div class="grid-item col-6">1</div>
      <div class="grid-item col-3">2</div>
      <div class="grid-item col-3">3</div>
    </div>
  </body>
</html>